<template>
	<div class="footer-slide-box" :class="isShow?'cardShowAnimate':'cardHideAnimate'">
		<p class="title">{{footerTitle}}</p>
			<ul class="footer-connect-box">
				<li class="temImg tem1" v-for="(v,index) of navImg" @click="changeTemplate(index)" :key="index">
					<img :src="v" />
					<div class="correct-box" v-if="correct==index?'correct':''"></div>
				</li>
			</ul>
	</div>
	
</template>

<script>
	export default {
		props: {
			isShow:Boolean,
			footerTitle:String,//标题
			correct: String, //当前图
			fromCom:String,//hScreenLive横屏直播 9张 hLookBack横屏回看4张 vScreenLive竖屏直播7张 vLookBack竖屏回看4张
		},
		components: {
		},
		data() {
			return {
				navImg:[],
			}
		},
		mounted: function() {	
		},
		methods:{
         changeTemplate(index) {
				if( this.correct != index){
					this.correct = index;
					this.$emit('clickTemplate',index)
				}				
			},
		},
		watch: {
			fromCom: {
				handler(newval, old) {
					if(newval == 'hLookBack'||newval == 'vLookBack'){
						for (let i=1;i<5;i++) {
						this.navImg.push(require('../../assets/images/invitation/lookBgSmall'+i+'.png'))
						}
					}else if(newval == 'hScreenLive'){
						for (let i=1;i<10;i++) {
						this.navImg.push(require("../../assets/images/invitation/sample"+i+".png"))
						}
					}else{
					for (let i=1;i<9;i++) {
						this.navImg.push(require("../../assets/images/invitation/sample"+i+".png")) 
						}
						this.navImg.splice(6,1)					
					}
				
           },
          immediate: true
	},
	
  }
	}
</script>

<style scoped="scoped">
	.footer-slide-box {
		width: 750px;
		height: 210px;
		background: white;
		position: fixed;
		left: 0;
		bottom: -210px;
		box-shadow: -5px -5px 30px #616168;
		z-index: 110!important;
	}
	.footer-slide-box .title {
		width: 100%;
		height: 60px;
		background: #f3f3f3;
		text-align: center;
		line-height: 60px;
		font-size: 26px;
		color: #585858;
	}
	.footer-connect-box{
		width: 100%;
		height: 150px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		overflow-x: scroll;
	}
	.footer-connect-box li{
		position: relative;
		width: 126px;
		height: 126px;
		margin-left: 15px;
		flex-shrink: 0;
	}
	.footer-connect-box li img{
		width: 100%;
		height: 100%;
	}
	.footer-connect-box li .correct-box {
		width: 126px;
		height: 126px;
		background: url(../../assets/images/YQ-btn.png) no-repeat center center;
		background-size: 42px 42px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.cardHideAnimate {
		z-index: 2;
		animation: cardHide 0.5s ease-out 1 forwards;
		
	}
	
	@keyframes cardHide {
		0% {
			transform: translateY(-210px);
		}
		100% {
			transform: translateY(0px);
		}
		
	}
	
	.cardShowAnimate {
		z-index: 2;
		animation: cardShow 0.5s ease-out 1 forwards;
	}
	
	@keyframes cardShow {
		0% {
			transform: translateY(0px);
		}
		100% {
			transform: translateY(-210px);
		}
		
	}
</style>